<script setup lang="ts">
import {ref, watch, computed} from 'vue';
import {QuestionType} from '@/views/question/addQuestion/types/questionTypes.ts';
import {ChoiceOptionVO} from "../../../../../generated";

const props = defineProps<{
  questionType?: number,
  options?: ChoiceOptionVO[],
  fillBlankNum?: number,
  isMultiple?: boolean,
}>();

const emit = defineEmits<{
  'submit': [],
  'update:modelValue': [value: any]
}>();

// Fisher-Yates 洗牌算法
const shuffleArray = <T>(array: T[]): T[] => {
  const newArray = [...array];
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  return newArray;
};

// 计算属性：打乱后的选项
const shuffledOptions = computed(() => {
  if (!props.options) return [];
  return shuffleArray(props.options);
});

const multipleChoiceAnswer = ref<string[]>([]);
const singleChoiceAnswer = ref<string | null>(null);
const judgementAnswer = ref<number | null>(null);
const fillBlankAnswers = ref<string[]>([]);
const comprehensiveAnswer = ref('');

// 初始化填空题答案数组
watch(() => props.fillBlankNum, (newNum) => {
  if (newNum && newNum > 0) {
    fillBlankAnswers.value = new Array(newNum).fill('');
  }
}, {immediate: true});

const updateValue = () => {
  // 触发更新
  const answer = {
    multipleChoice: props.isMultiple ? multipleChoiceAnswer.value : [singleChoiceAnswer.value],
    judgement: judgementAnswer.value,
    fillBlanks: fillBlankAnswers.value,
    comprehensive: comprehensiveAnswer.value
  };
  emit('update:modelValue', answer);
};
</script>

<template>

  <!-- 选择题 -->
  <div v-if="questionType === QuestionType.MULTIPLE_CHOICE" class="multiple-choice">
    <template v-if="isMultiple">
      <el-checkbox-group v-model="multipleChoiceAnswer" @change="updateValue">
        <div v-for="option in shuffledOptions" :key="option.id" class="option-item">
          <el-checkbox :value="option.id">
            {{ option.option }}
          </el-checkbox>
        </div>
      </el-checkbox-group>
    </template>
    <template v-else>
      <el-radio-group v-model="singleChoiceAnswer" @change="updateValue">
        <div v-for="option in shuffledOptions" :key="option.id" class="option-item">
          <el-radio :value="option.id">
            {{ option.option }}
          </el-radio>
        </div>
      </el-radio-group>
    </template>
  </div>

  <!-- 判断题 -->
  <div v-else-if="questionType === QuestionType.JUDGEMENT" class="judgement">
    <el-radio-group v-model="judgementAnswer" class="judgement-options" @change="updateValue">
      <el-radio :value="1">正确</el-radio>
      <el-radio :value="0">错误</el-radio>
    </el-radio-group>
  </div>

  <!-- 填空题 -->
  <div v-else-if="questionType === QuestionType.FILL_BLANK" class="fill-blank">
    <div v-for="(_,index) in fillBlankAnswers" :key="index" class="blank-item">
      <div class="blank-number">
        <el-tag size="large" effect="plain" round type="info">
          填空 #{{ index + 1 }}
        </el-tag>
      </div>
      <el-input
          v-model="fillBlankAnswers[index]"
          placeholder="请输入答案"
          class="blank-input"
          @change="updateValue"
      />
    </div>
  </div>

  <!-- 综合题 -->
  <div v-else-if="questionType === QuestionType.COMPREHENSIVE" class="comprehensive">
    <el-input
        v-model="comprehensiveAnswer"
        type="textarea"
        :rows="10"
        placeholder="请输入答案"
        resize="none"
        class="comprehensive-input"
        @change="updateValue"
    />
  </div>
</template>

<style scoped>
.answer-area {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.answer-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.answer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 3px;
  background-color: #409EFF;
  border-radius: 1.5px;
}

/* 选择题样式 */
.multiple-choice .option-item {
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 6px;
  transition: all 0.3s;
}

.multiple-choice .option-item:hover {
  background-color: #f5f7fa;
}

/* 判断题样式 */
.judgement-options {
  display: flex;
  gap: 30px;
  margin: 20px 0;
  padding-left: 20px;
}

/* 填空题样式 */
.blank-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.blank-number {
  flex: 0 0 auto;
}

.blank-input {
  flex: 1;
}

/* 综合题样式 */
.comprehensive-input {
  width: 100%;
  margin-bottom: 20px;
}

/* 提交区域样式 */
.submit-area {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 